<template>
	<view class="container">
		<view class="avatar">
			<!-- 上传组件 -->
			<u-upload ref="avatar" name="avatar" maxCount="1" :fileList="filelist" width="120" height="120" @delete="del"
				@afterRead="read" />
		</view>

		<view class="content">
			<u--form labelPosition="left" labelWidth="60" :model="auth" :rules="rules" ref="profile">
				<!-- 昵称 -->
				<u-form-item label="昵称" prop="nickname">
					<u--input v-model="auth.nickname" placeholder="请输入昵称" />
				</u-form-item>

				<!-- 手机号 -->
				<u-form-item label="手机号" prop="mobile">
					<u--input v-model="auth.mobile" placeholder="请输入手机号" />
				</u-form-item>

				<!-- 邮箱 -->
				<u-form-item label="邮箱" prop="email">
					<u--input v-model="auth.email" placeholder="请输入邮箱" />
				</u-form-item>

				<!-- 密码 -->
				<u-form-item label="密码" prop="password">
					<u--input type="password" v-model="auth.password" placeholder="请输入密码" />
				</u-form-item>

				<!-- 头像 -->

				<!-- 提交按钮 -->
				<u-button text="修改资料" icon="pushpin" size="small" type="primary" :customStyle="btnStyle" @click="profile" />
			</u--form>
		</view>

		<!-- 消息提醒 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>

<script>
export default {
	onLoad() {
		// 挂载自定义封装服务 来去验证页面是否有登录
		this.auth = this.$u.auth.check()
		this.auth.password = ""

		if (this.auth.avatar) {
			this.filelist = [
				{ url: this.auth.userhead }
			]
		}
	},
	onReady() {
		//让表单初始化验证规则
		this.$refs.profile.setRules(this.rules)

	},
	created() {

		this.timer = setInterval(() => {

			let a = this.$u.count.check()
			console.log(a)

		}, 5000);

	},
	beforeDestroy() {
		clearInterval(this.timer)
	},
	data() {
		return {
			btnStyle: {
				width: '10em',
				height: '3em',
				marginTop: '2em'
			},
			auth: {},
			filelist: [],
			rules: {
				nickname: {
					required: true,
					message: '请填写昵称',
					trigger: ['blur', 'change']
				},
				email: {
					required: true,
					type: 'email', //uview 自带的验证规则
					message: '请填写邮箱',
					trigger: ['blur', 'change']
				},
				mobile: [
					{
						required: true,
						message: '请填写手机号码',
						trigger: ['blur', 'change']
					},
					{
						//自定义验证器函数，进行手机号码验证
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value)
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}
				]
			}
		}
	},
	methods: {
		profile(e) {
			// console.log(e)
			// return false
			//判断是否有通过表单验证
			// console.log(this.$refs.profile.validate())
			// return false
			this.$refs.profile.validate().then(async () => {

				//组装数据
				var data = {
					adminid: this.auth.id,
					nickname: this.auth.nickname,
					mobile: this.auth.mobile,
					email: this.auth.email
				}

				if (this.auth.password) {
					data.password = this.auth.password
				}

				var result = await this.$u.api.admin.profile(data)

				if (result.code) {
					this.$refs.notice.show({
						type: 'success',
						message: result.msg,
						duration: 2000,
						complete: () => {
							//保存登录信息到本地存储 同步保存方法
							uni.setStorageSync('auth', result.data)

							//返回上一个界面
							uni.$u.route({
								type: 'navigateBack',
								delta: 1
							})

							return false
						}
					})
				} else {
					this.$refs.notice.show({
						type: 'error',
						message: result.msg
					})
				}
			})
				.catch(() => {
					uni.$u.toast('效验失败')
				})
		},
		// 图片删除
		del() {
			this.filelist = []
		},
		//图片读取,就是要上传
		async read(event) {
			//组装上传数据
			var data = {
				filePath: event.file.thumb,
				name: 'avatar',
				header: {},
				formData: {
					adminid: this.auth.id
				}

			}



			//调用接口
			var result = await this.$u.api.admin.avatar(data)

			if (result.code) {
				this.filelist = [
					{ url: result.data }
				]

				//获取到当前的登录信息
				var auth = this.$u.auth.check()

				//修改本地存储中的图像内容
				auth.avatar_text = result.data

				//重新覆盖一遍本地存储
				uni.setStorageSync('auth', auth)
			} else {
				this.$refs.notice.show({
					type: 'error',
					message: result.msg
				})
				return false
			}
		}
	}
}
</script>

<style>
.container {
	height: 100%;
	margin: 0 50rpx;
	box-sizing: border-box;
}

.avatar {
	text-align: center;
}

.u-avatar {
	margin: 80rpx auto 40rpx;
}

.xcx {
	width: 200rpx;
	height: 200rpx;
	margin: 80rpx auto 40rpx;
	border-radius: 100%;
	overflow: hidden;
}

.nickname {
	font-size: 14px;
	text-align: center;
}

.title {
	text-align: center;
	margin: 40rpx 0;
	font-size: 14rpx;
}

.avatar .u-upload {
	justify-content: center;
	align-items: center;
	margin: 3em auto;
}
</style>
